<template>
    <div>
        <ul class="uploadbox">
            <li>图片上传</li>
            <li>视频上传</li>
        </ul>
        <div class="uploadListBox">
            <div class="uploadList" v-for="item in jsonImgList" :key="item">
                <img :src="imgFuncUrl(item)" alt="">
                <div class="ImgName">{{ item.FN010 }}</div>
                <div class="uploadListBottom">
                    <input type="checkbox" name="" id="">
                    <div class="operation">
                        <a href=" javascript:void(0)">插入富文本</a>
                        <a href=" javascript:void(0)" @click="DeleteFuncImg(item)"
                            v-loading.fullscreen.lock="loadingDel">删除</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- element-plus上传图片 -->
        <div class="element-plus">
            <el-upload ref="uploadRef" class="upload-demo" action="http://wh011024.mysh360.com/FileServSystemMgt/FileUpload"
                :auto-upload="false" :data="meqMsg">
                <template #trigger>
                    <el-button type="primary">选择文件</el-button>
                </template>
                <el-button class="ml-3" type="success" @click="submitUpload" v-loading.fullscreen.lock="loadingupload">
                    上传至服务器
                </el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        小于500kb的Jpg /png文件，这是element-Plus方式
                    </div>
                </template>
            </el-upload>
        </div>
        <!-- Fetch上传文件 -->
        <div class="fetchUpLoadBox">
            <input type="file" class="fileInput" id="fileInput" multiple>
            <div class="fetchupload" @click="FuncFetchImg" v-loading.fullscreen.lock="loadingFetch">Fetch上传文件</div>
        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { UploadInstance } from 'element-plus'
let { proxy } = getCurrentInstance()
//***存放数据
let jsonImgList = ref([])
//***栏目号
let CurrentDataGroup = JSON.parse(window.sessionStorage.getItem('datas')).NumDataGroup;
//***获取文章主键
let StrPrimaryKey = proxy.$route.query.StrPrimaryKey
//***获取角色号
function user() {
    return JSON.parse(window.sessionStorage.getItem("jsonArrayUserGroup"))[0].NumUserGroup;
}
//***获取Token
const AccessTokens = window.localStorage.getItem("AccessToken");
let meqMsg = { CurrentDataGroup: CurrentDataGroup, StrPrimaryKey: StrPrimaryKey, FileType: "ImageFile", AccessToken: AccessTokens, "CurrentUserGroup": user() }
const uploadRef = ref(null)
//一、element-plus方式上传图片
let loadingupload = ref(false)
const submitUpload = () => {
    loadingupload.value = true
    uploadRef.value.submit()
    setTimeout(() => {
        uploadList()
        loadingupload.value = false
    }, 1000)
}
//渲染图片
function uploadList() {
    // 请求参数
    let msg = { "CurrentDataGroup": CurrentDataGroup, "StrPrimaryKey": StrPrimaryKey, "FileType": "ImageFile", "CurrentUserGroup": user() }
    const promiseReq = proxy.$HelperAxios.post("http://wh011024.mysh360.com/FileServSystemMgt/FileList", msg)
    promiseReq.then((res) => {
        jsonImgList.value = res.data.Payload
    })
}
uploadList()
//处理图片路径问题
function imgFuncUrl(item) {
    return item.RL02Main.replaceAll("PlaceholderColon", ':').replaceAll("PlaceholderComma", ',').replaceAll("PlaceholderQuote", '""').replaceAll("https", 'http')
}
//删除图片
let loadingDel = ref(false)
function DeleteFuncImg(item) {
    //消息弹框
    ElMessageBox.confirm('你确定要删除该图片吗？', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', })
        .then(() => {
            ElMessage({
                message: "正在删除",
                showClose: true,
            })
            setTimeout(() => {
                loadingDel.value = true
            }, 1000);
            // 请求参数
            let msg = { "CurrentDataGroup": CurrentDataGroup, "StrPrimaryKey": StrPrimaryKey, "FileType": "ImageFile", "CurrentUserGroup": user(), "FileName": item.FN010 }
            const promiseReq = proxy.$HelperAxios.post("http://wh011024.mysh360.com/FileServSystemMgt/DelFileSingle", msg)
            promiseReq.then((res) => {
                uploadList()
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                loadingDel.value = false
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//Fetch方式上传图片
let loadingFetch = ref(false)
function FuncFetchImg() {
    loadingFetch.value = true
    const fileUpLoad = document.querySelector("#fileInput");
    // console.log(fileUpLoad.files[0]);
    const formData = new FormData();
    formData.append("file", fileUpLoad.files[0]);
    formData.append("CurrentDataGroup", CurrentDataGroup);
    formData.append("StrPrimaryKey", StrPrimaryKey);
    formData.append("FileType", "ImageFile");
    formData.append("AccessToken", AccessTokens);
    formData.append("CurrentUserGroup", user());
    fetch("http://wh011024.mysh360.com/FileServSystemMgt/FileUpload", {
        method: 'POST',
        body: formData,
    }).then((res) => {
        // console.log(res);
        if (res.ok) {
            return res.text();
        } else {
            return "error"
        }
    }).then((data) => {
        if (data !== "error") {
            let jsonres = JSON.parse(data);
            if (jsonres.StatusCode === "SuccLocal") {
                ElMessage({
                    message: '文件上传完毕',
                    type: 'success',
                });
                uploadList()
                loadingFetch.value = false
            }
        }
    })
}
</script>

<style scoped>
.uploadbox {
    display: flex;
}

.uploadbox li {
    margin-right: 20px;
    line-height: 50px;
    /* color: #2222 ; */
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.uploadbox li:nth-child(1) {
    border-bottom: 2px solid blue;
}

.uploadbox li:hover {
    border-bottom: 2px solid blue;
}

.uploadListBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.uploadList {
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border: 2px solid beige;
}

.uploadList img {
    height: 200px;
}

.ImgName {
    padding: 10px 0;
}

.uploadListBottom {
    display: flex;
    justify-content: space-between;
}

.uploadListBottom .operation a {
    color: rgb(211, 212, 212);
    margin-left: 10px;
    text-decoration: none;
}

.fetchUpLoadBox {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.fetchupload {
    margin-right: 200px;
    background-color: rgb(64, 33, 240);
    padding: 5px;
    border-radius: 5px;
    color: white;
}

.fetchupload:hover {
    background-color: rgb(113, 93, 226);
    cursor: pointer;
}
</style>
